<template>
  <view class="main-view">
    <eui-section title="单选" type="line">
      <view class="uni-px-5 uni-pb-5">
        <view class="text">单选选中：{{JSON.stringify(radio1)}}</view>
        <eui-data-checkbox v-model="radio1" :localdata="sex" @onChange="onChange"></eui-data-checkbox>
      </view>
    </eui-section>
    <eui-section title="多选" subTitle="使用multiple属性开启多选" type="line">
      <view class="uni-px-5 uni-pb-5">
        <view class="text">多选选中：{{JSON.stringify(checkbox1)}}</view>
        <eui-data-checkbox multiple v-model="checkbox1" :localdata="hobby" @onChange="onChange"></eui-data-checkbox>
      </view>
    </eui-section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radio1: 0,
      radio2: 0,
      radio3: 0,
      radio4: 0,
      radio5: 0,
      radio6: 0,
      checkbox1: '',
      checkbox2: '',
      checkbox3: '',
      checkbox4: '',
      checkbox5: '',
      checkbox6: '',
      sex: [{
        text: '男',
        value: 0
      }, {
        text: '女',
        value: 1
      }, {
        text: '未知',
        value: 2
      }],
      sex1: [{
        text: '男',
        value: 0
      }, {
        text: '女',
        value: 1,
        disable: true
      }, {
        text: '未知',
        value: 2
      }],
      hobby: [{
        text: '足球',
        value: 0
      }, {
        text: '篮球',
        value: 1
      }, {
        text: '游泳',
        value: 2
      }],
      hobby2: [{
        text: '足球',
        value: 0,
        disable: true
      }, {
        text: '篮球',
        value: 1,
        disable: true
      }, {
        text: '游泳',
        value: 2
      }],
    }
  },
  methods: {
    onChange(v) {
      console.log('============v: ', v);
    }
  }
}
</script>

<style lang="scss">
.main-view {
  width: 100%;
  height: 100vh;
  background: #eeeeee;
}
.text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
.uni-px-5 {
  padding-left: 10px;
  padding-right: 10px;
}
.uni-pb-5 {
  padding-bottom: 10px;
}
</style>
